<template>
  <div id="space-issues-search">
    <div class="main-container container-limited container-fluid page-holder">
      <breadcrumb/>
      <div class="easy-container main-container container-fluid border-bottom">
        <div class="flex align-items-center">
          <label for="title" class="sub-label shrink-0 text-right m-r-10">按资源名</label>
          <el-input id="title" v-model="searchInfo.title" placeholder="请输入资源名关键字"/>
        </div>
        <div class="flex align-items-center m-t-8">
          <label for="author" class="sub-label shrink-0 text-right m-r-10">按作者</label>
          <el-input id="author" v-model="searchInfo.author" placeholder="请输入资源作者"/>
        </div>
        <div class="flex align-items-center m-t-8">
          <label for="tags" class="sub-label shrink-0 text-right m-r-10">按标签</label>
          <TagSelect :selected-tags.sync="searchInfo.tags"
                     :is-label="false" :quick-add="false" :tag-create="false"/>
          <el-button type="primary" class="m-l-auto"
                     @click="onSubmit" :loading="isLoading">搜索</el-button>
        </div>
        <div v-if="initSearchParams.title" class="m-t-16">
          没有找到想要的问题？试试
          <router-link :to="toResources" class="link el-link--primary" v-text="'搜索资源'" />
        </div>
      </div>
      <IssuesList
        :issues="issues"
        :is-loading="isLoading"
        :ownership-display="true"
        community-tag
      />
      <pagination :current-page="pagination.currentPage" :page-count="pagination.pageCount"/>
    </div>
  </div>
</template>

<script>
import TagSelect from '@/components/shared/TagSelect';
import IssuesList from '../IssuesList';
import * as format from '../format';

export default {
  name: 'IssuesSearch', // 问题搜索页面
  components: { TagSelect, IssuesList },
  data() {
    return {
      searchInfo: {
        title: this.$route.query.title || '',
        author: this.$route.query.author || '',
        tags: this.$va.formatSingleTag(this.$route.query.tags) || [],
      },
      issues: [],
      isLoading: false,
      pagination: { // 翻页组件
        currentPage: null, // 当前页
        pageCount: null, // 总页数
      },
    };
  },
  computed: {
    initSearchParams() {
      return {
        type: 'Issue',
        spaceId: this.$route.params.spaceId,
        title: this.$route.query.title || undefined,
        author: this.$route.query.author || undefined,
        tags: this.$route.query.tags ? this.searchInfo.tags : undefined,
        page: this.$route.query.page || 1,
      };
    },
    toResources() {
      return {
        path: `/${this.$rp.SPACES}/${this.$route.params.spaceId}/${this.$rp.SPACE_RESOURCES_SEARCH}`,
        query: Object.assign({}, this.$route.query, { page: undefined }),
      };
    },
  },
  methods: {
    // 搜索
    onSubmit() {
      const validTitle = this.searchInfo.title.trim();
      const validAuthor = this.searchInfo.author.trim();
      this.searchInfo.title = validTitle;
      this.searchInfo.author = validAuthor;

      this.reloadQuery({
        title: validTitle || undefined,
        author: validAuthor || undefined,
        tags: this.searchInfo.tags.length ? this.searchInfo.tags : undefined,
      });
    },
    // 真正的搜索
    search() {
      this.isLoading = true;
      this.$api.search.fn(this.initSearchParams)
        .then(res => this.handleRes(res))
        .catch(() => {})
        .then(() => { this.isLoading = false; });
    },
    handleRes(res) {
      this.issues = format.formatIssuesList(res.data);
      this.pagination.currentPage = res.kaminari.current_page;
      this.pagination.pageCount = res.kaminari.total_pages;
    },
  },
  created() { this.search(); },
  watch: {
    initSearchParams() { this.search(); },
  },
};
</script>

<style></style>
